<template>
    <div class="mod-user">
        <avue-crud ref="crud"
                   :data="dataList"
                   :option="tableOption"
                   :page="page"
                   @search-change="searchChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @selection-change="selectionChange">
            <template slot="menuLeft">
                <el-button v-if="isAuth('sys:user:save')"
                           icon="el-icon-plus"
                           size="small"
                           type="primary"
                           @click.stop="addOrUpdateHandle()">新增
                </el-button>

                <el-button v-if="isAuth('sys:user:delete')"
                           :disabled="dataListSelections.length <= 0"
                           size="small"
                           type="danger"
                           @click="deleteHandle()">批量删除
                </el-button>
            </template>
            <template slot="menu"
                      slot-scope="scope">
                <el-button v-if="isAuth('sys:user:update')"
                           icon="el-icon-edit"
                           size="small"
                           type="primary"
                           @click.stop="addOrUpdateHandle(scope.row.userId)">编辑
                </el-button>

                <el-button v-if="isAuth('sys:user:delete')"
                           icon="el-icon-delete"
                           size="small"
                           type="danger"
                           @click.stop="deleteHandle(scope.row.userId,scope.row.name)">删除
                </el-button>
            </template>
        </avue-crud>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible"
                       ref="addOrUpdate"
                       @refreshDataList="getDataList"></add-or-update>
    </div>
</template>

<script>
import {tableOption} from '@/crud/sys/user'
import AddOrUpdate from './user-add-or-update'

export default {
	data () {
		return {
            searchParams: {},
			dataList: [],
			dataListLoading: false,
			dataListSelections: [],
			dutyList: [],
			addOrUpdateVisible: false,
			tableOption: tableOption,
			page: {
				total: 0, // 总页数
				currentPage: 1, // 当前页数
				pageSize: 10 // 每页显示多少条
			}
		}
	},
	components: {
		AddOrUpdate
	},
	mounted () {
		this.init()
		// 基于准备好的dom，初始化echarts实例
	},
	methods: {
		// 获取数据列表
		init () {
			this.tableOption.column.forEach((item) => {
				//console.log("item"+item.prop)
				//console.info(item)
				if (item.prop === 'operType') {
					item.dicData.push({
						value: '管理员',
						label: '管理员'
					})

					item.dicData.push({
						value: '审批员',
						label: '审批员'
					})

					item.dicData.push({
						value: '专家',
						label: '专家'
					})

					item.dicData.push({
						value: '填报员',
						label: '填报员'
					})
				}
			})
     this.getDataList(this.page,{})
		},
		getDataList (page, params, done) {
			this.dataListLoading = true
			this.$http({
				url: this.$http.adornUrl('/sys/user/page'),
				method: 'get',
				params: this.$http.adornParams(
					Object.assign(
						{
							current: page == null ? this.page.currentPage : page.currentPage,
							size: page == null ? this.page.pageSize : page.pageSize
						},
						params
					)
				)
			}).then(({data}) => {
				this.dataList = data.records
				this.page.total = data.total
				this.dataListLoading = false
				if (done) {
					done()
				}
			})
		},
		// 条件查询
		searchChange (params, done) {
			console.log('🚀 ~ params', params)
            this.page.currentPage = 1;
            this.searchParams = params;
			this.getDataList(this.page, params, done)
		},
		currentChange (val) {
			console.log('🚀 ~ val', val)
            console.log('🚀 ~ this.searchParams', this.searchParams)
            this.page.currentPage = val;
			this.getDataList(this.page, this.searchParams)
		},
        sizeChange(val){
            console.log('🚀 ~ val', val)
            this.page.pageSize = val;
            this.getDataList(this.page, this.searchParams);
        },
		// 多选变化
		selectionChange (val) {
			this.dataListSelections = val
            // console.log('🚀 ~ this.dataListSelections', this.dataListSelections)
		},
		// 新增 / 修改
		addOrUpdateHandle (id) {
			this.addOrUpdateVisible = true
			this.$nextTick(() => {
				this.$refs.addOrUpdate.init(id)
			})
		},
		// 删除
		deleteHandle (id, name) {
			var userIds = id ? [id] : this.dataListSelections.map(item => {
				return item.userId
			})
			var names = name ? [name] : this.dataListSelections.map(item => {
				return item.name
			})
			this.$confirm(`确定对[姓名为${names.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http({
					url: this.$http.adornUrl('/sys/user'),
					method: 'delete',
					data: this.$http.adornData(userIds, false)
				}).then(({data}) => {
					this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
							this.getDataList()
						}
					})
				})
			}).catch(() => {
			})
		}
	}
}
</script>
